<template>
  <div v-if="!inline" class="flex items-center justify-center w-full h-64">
    <div :class="spinnerClass"></div>
  </div>
  <div v-else class="inline-flex items-center justify-center">
    <div :class="spinnerClass"></div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

interface Props {
  size?: SpinnerSize
  inline?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'lg',
  inline: false,
})

const sizeToClass: Record<SpinnerSize, string> = {
  xs: 'h-4 w-4',
  sm: 'h-6 w-6',
  md: 'h-8 w-8',
  lg: 'h-12 w-12',
  xl: 'h-16 w-16',
}

const spinnerClass = computed(() => [
  'animate-spin rounded-full border-b-2 border-primary-500',
  sizeToClass[props.size],
].join(' '))
</script>